<div class="m-2">
    <div class="d-flex justify-content-center">
        <a href="#" class="btn-link" onclick="return goto_week('{{report.week_offset - 1}}');" style="font-size: 2.5em"><i class="fa fa-chevron-circle-left"></i></a>
        <div class="text-center mx-4">
            <h3 class="mb-1">第{{report.week}}周项目周报</h3>
            <small class="badge badge-secondary">{{report.week_start}} - {{report.week_end}}</small>
        </div>
        <a href="#" class="btn-link" onclick="return goto_week('{{report.week_offset + 1}}');" style="font-size: 2.5em"><i class="fa fa-chevron-circle-right"></i></a>
    </div>

    <div class="container-fluid mt-4">
        <div class="row">
            <div class="col-md-6">
                <h5><i class="fa fa-smile-o mr-2"></i>已验收的任务 <small class="badge badge-light">{{#report.archived}}</small></h5>
                <hr>
                <ul class="mt-2 px-0" style="list-style-type: none">
                    {% for _, task in ipairs(report.archived) do %}
                    <li class="d-block text-truncate text-muted mw-100 mb-1">
                        <i class="fa fa-calendar-check-o text-success"></i>
                        <a href="#" class="task-link" onclick="return open_task('{{task.id}}');">{{task.name}}</a>
                        <span class="badge badge-secondary text-white ml-1">{{task.creator_name}}</span><i class="fa fa-chevron-right mx-1"></i><span class="badge badge-secondary text-white">{{task.assigned_name}}</span>
                    </li>
                    {% end %}
                </ul>
            </div>
            <div class="col-md-6">
                <h5><i class="fa fa-frown-o mr-2"></i>未验收的任务 <small class="badge badge-light">{{#report.not_archived}}</small></h5>
                <hr>
                <ul class="mt-2 px-0" style="list-style-type: none">
                    {% for _, task in ipairs(report.not_archived) do %}
                    <li class="d-block text-truncate text-muted mw-100 mb-1">
                        <i class="fa fa-calendar-times-o text-danger mr-1"></i><span class="text-danger">{{string.format('%04d.%02d.%02d', task.end_time.year, task.end_time.month, task.end_time.day)}}</span>
                        <a href="#" class="task-link" onclick="return open_task('{{task.id}}');">{{task.name}}</a>
                        <span class="badge badge-secondary text-white ml-1">{{task.creator_name}}</span><i class="fa fa-chevron-right mx-1"></i><span class="badge badge-secondary text-white">{{task.assigned_name}}</span>
                    </li>
                    {% end %}
                </ul>
            </div>
        </div>
    </div>
</div>

<div id="task-view" class="task-view-pane invisible">
    <div id="task-info-pane">
    </div>
</div>

<script>
function goto_week(week_offset) {
    $.post('/dashboard/projects/get_reports', {pid: '{{proj_id}}', pname: '{{proj_name}}', week_offset: week_offset}, function(ret) {
        $('#project-detail').empty();
        $('#project-detail').append($(ret));
    }, 'html');
}
function open_task(tid) {
    $('#task-info-pane').empty();
    $('#task-info-pane').get(0).innerHTML = '<div class="text-center text-muted" style="margin-top: 40%"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>';
    $('#task-view').removeClass('invisible');
    $('#task-view').addClass('visible');

    $.post('/dashboard/tasks/readonly_info', {id : tid}, function(ret) {
        $('#task-info-pane').empty();
        $('#task-info-pane').append($(ret));
    }, 'html');
}
</script>